<template>
  <lay-out
      :header-image-url="img"
      :page-tag="{
            type:'003',
            number:'440892818892837'
          }">
      <div style="height:45vh">
        <ztSwiper :swiperList="scrollUrl"  :showPagi="true">
        </ztSwiper>
      </div>
      <car-base :base="base"></car-base>
      <insurance :bx="bx" title="保险"></insurance>
      <illegal :sg="sg" icon="../../../static/icon/record.png" titles="事故" title="事故"></illegal>
      <illegal :wz="wz" icon="../../../static/icon/record.png" titles="违章" title="违章" :isWz="false"  @filter="filter"></illegal>
      <track-list title="轨迹" :trackData="trackData" :more="true" @axisClick="trackClickHandle" @traceFilter="traceFilter" :isFilter="true"></track-list>
  </lay-out>
</template>

<script>
  import layOut from '../../components/lay-out'
  import carBase from './carBase'
  import insurance from './insurance'
  import illegal from './illegal'
  import trackList from '../personFile/track'
  import ztSwiper from '../../components/zt-swiper'
  import request, { insertCarTrack } from '../../helper/request'
  import {BASE64_TYPE} from '@/config'
  import { mapActions } from 'vuex'
  export default {
    name: 'car',
    components: {
      layOut,
      carBase,
      insurance,
      illegal,
      trackList,
      ztSwiper
    },
    data() {
      return {
        isScroll: false,
        isImg: false,
        scrollUrl: [],
        base: {},
        bx: [],
        sg: [],
        wz: [],
        trackData: [],
        img: '',
        itemData: []
      }
    },
    mixins: [],
    computed: {},
    methods: {
      trackClickHandle(event, item, index) {
        for (var i = item.tkkArr.length - 1; i >= 0; i--) {
          if(item.tkkArr[i].xp) {
            item.tkkArr[i].xp = `${BASE64_TYPE}${item.tkkArr[i].xp.xp}`
          }else {
            item.tkkArr[i].xp = '/static/default/head.png'
          }
        }
        this.getcarDetail(item)
        this.$router.push({path: './subpage_car'})
      },
      // 基本信息
      async getBase() {
        let base = await request('vehicle/jbxx', 'SC0418', {cph: '000000'})
        this.img = base.pic[0].xp ? `${BASE64_TYPE}${base.pic[0].xp}` : '/static/default/head.png'
        this.getCarImage(this.img)
        this.getCarBase({'img': this.img, 'carName': base.clpp, 'tag': base.clbs, 'onwer': base.clsyr, 'id': base.sfzh})
        this.scrollUrl = base.pic.map(resLD => {
          return {
            id: resLD.id,
            xp: resLD.xp ? `${BASE64_TYPE}${resLD.xp}` : '/static/default/head.png'
          }
        })
        this.base = base
        // 传给安卓
        let obj = {}
        obj.clpp = base.clpp
        obj.clsyr = base.clsyr
        obj.cph = base.cph
        obj.fdjh = base.fdjh
        obj.sfzh = base.sfzh
        obj.xp = base.xp
        insertCarTrack(obj)
      },
      // 保险、事故
      async getSgbx() {
        let base = await request('vehicle/bxsg', 'SC0419', {cph: '000000'})
        this.bx = base.bx
        this.sg = base.sg
      },
      // 违章
      async getWz() {
        let base = await request('vehicle/wz', 'SC0420', {cph: '000000'})
        this.wz = base.wzArr
      },
      // 轨迹
      async getGj() {
        let base = await request('vehicle/gj', 'SC0421', {cph: '000000'})
        this.trackData = base.gjArr
        console.log(base)
      },
      filter(start, end) {
        if(typeof start !== 'undefined') {
          request('vehicle/wz', 'SC0420', {cph: '000000', kssj: start, jssj: end}).then((base) => {
            this.wz = base.wzArr
          })
        }
      },
      traceFilter(start, end) {
        if(typeof start !== 'undefined') {
          request('vehicle/gj', 'SC0421', {cph: '000000', kssj: start, jssj: end}).then((base) => {
            this.trackData = base.gjArr
          })
        }
      },
      ...mapActions('personStore', {
        getcarDetail: 'getcarDetail',
        getCarImage: 'getCarImage',
        getCarBase: 'getCarBase'
      })
    },
    filters: {
    },
    mounted() {
    },
    created() {
      this.getBase()
      this.getSgbx()
      this.getWz()
      this.getGj()
    }
  }
</script>

<style scoped>

</style>
